 <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen">
 <script src="/js/jquery.prettyPhoto.js" type="text/javascript"></script>
 <script src="/js/hover-image.js" type="text/javascript"></script>
 <script src="/js/jquery.bxSlider.js" type="text/javascript"></script>
 <script type="text/javascript">
		$(window).load(function() {
			var slider = $('#slider-2').bxSlider({
				controls: false
				 
				
				//moveSlideQty: 2,
				//displaySlideQty: 4
			});

			$('.thumbs a').click(function(){
					
				   var thumbIndex = $('.thumbs a').index(this);
				    // call the "goToSlide" public function
				    slider.goToSlide(thumbIndex);
				  
				    // remove all active classes
				    $('.thumbs a').removeClass('pager-active');
				    // assisgn "pager-active" to clicked thumb
				    $(this).addClass('pager-active');
				    // very important! you must kill the links default behavior
				    return false;
			});

				  // assign "pager-active" class to the first thumb
			$('.thumbs a:first').addClass('pager-active');

			var totalSlides = 2;
			var actualSlide = 1;
			
			
		    $('#left_arr').click(function () 
				{
		    		slider.goToPreviousSlide();

		    		$('#tb' + actualSlide).removeClass('pager-active');

			    	actualSlide = (actualSlide > 1)? actualSlide - 1 : totalSlides;

			    	$('#tb' + actualSlide).addClass('pager-active');
			    	
			    	//alert(actualSlide);	
					//alert($('.thumbs a[id=tb' + actualSlide + ']'));
			    }
	   		);
	   		
		    $('#right_arr').click(function ()
				{
		    		slider.goToNextSlide();

		    		$('#tb' + actualSlide ).removeClass('pager-active');

					actualSlide = (actualSlide < totalSlides)? actualSlide + 1 : 1 ;
					//alert(actualSlide);	

					$('#tb' + actualSlide ).addClass('pager-active');
					//alert($('.thumbs a[id=tb' + actualSlide + ']')); 
				}
		    );
			
		});
</script>
<div id="page3">
          <div class="row-bot">
        	<div class="row-bot-bg">
            	<div class="main">
                	<h2 id="mostrar_slide">Os mehores bolos decorados<span> para qualquer Ocasião</span></h2>
                </div>
            </div>
        </div>
<div class="ic"><div class="inner_copy">All <a href="http://www.magentothemesworld.com" title="Best Magento Templates">premium Magento themes</a> at magentothemesworld.com!</div></div>
        <div class="main">
            <div class="container">
            	<h3 class="prev-indent-bot">Confira nossos deliciosos produtos e dê a sua nota: </h3>
                <div id="slider-2">
                	<?php foreach ($this->produtos as $produto) :?>
	                    <div style="clear: right;">
	                    	<div class="p4">
	                            <figure style="float: right; border:solid white 5px"><a class="lightbox" href="/images/slider-img1.jpg"><img style="max-height: 300px; max-width: 400px;" src="/images/up/<?php echo $this->escape($produto['caminho_imagem'])?>" alt=""></a></figure>
	                            <h5 style="font-size: 18px"><?php echo $this->escape($produto['nome'])?></h5>
	                            <p style="height: 168px; text-align: justify; padding-right: 4px;"><?php echo $this->escape($produto['descricao'])?></p>
	                            <p><strong class="color-2">Preço: R$ --.--</strong></p>
		                         <a class="button-1" href="#">Encomendar</a>
	                            <div id="avaliacao" style="float: right;padding-right: 20px; margin-bottom: 0px;">
	                            	Avaliação Média:
	                            	<img src="/images/estrela_aces.png"/>
	                            	<img src="/images/estrela_aces.png"/>
	                            	<img src="/images/estrela_aces.png"/>
	                            	<img src="/images/estrela_apag.gif"/>
	                            	<img src="/images/estrela_apag.gif"/>
	                            </div>
	                        </div>
	                    </div>
                    <?php endforeach;?>
                    
                </div>
                <div id="pag_controles">
                	<img id="left_arr" src="/images/arrow_left.png" align="left" style="cursor: pointer;"/>
                	
                	<img id="right_arr" src="/images/arrow_right.png" align="right" style="cursor: pointer;"/>
                </div>
                <br/><br/>
                <span id="aviso_thumb">Clique sobre as imagens abaixo para visualizá-las</span>
                <div id="tmb" class="thumbs">
                	<?php $i = 0; 
                	 foreach ($this->produtos as $produto) :?>
                		<a id="tb<?php echo ++$i; ?>"><img  src="/images/up/<?php echo $this->escape($produto['caminho_imagem'])?>" alt=""></a>
                	<?php endforeach;?>
                	
                </div>
            </div>
        </div>
</div>